<template>
    <l-layout class="l-tab-page" :topMove="false" :bottomMove="false" v-loading="loading" :element-loading-text="loadingtext">
        <l-panel style="padding:0;padding-left:8px;padding-right:8px;padding-top: 10px;">
            <div class="l-rblock l-form-viewer" style="padding:25px;">
                <el-form :model="formData" :rules="rules" size="mini" labelPosition="right" labelWidth="118px" ref="form">
                    <div class="l-auto-window only-tabs">
                        <el-tabs v-model="activeName" type="card">
                            <el-tab-pane class="l-tabs-container" :label="$t('主表信息')" name="tab0">
                                <el-row :gutter="0">
                                    <div class="l-rblock">
                                        <el-form-item :label="$t('登录方式')" prop="lr_systemconfig_login_f_LoginType">
                                            <el-col :span="9">
                                                <l-select :options="lr_systemconfig_login_f_LoginTypeOptions"
                                                    v-model="formData.lr_systemconfig_login_f_LoginType" />
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item :label="$t('登录时长(小时)')" prop="lr_systemconfig_login_f_TokenTimeout">
                                            <el-col :span="9">
                                                <el-input-number :min="1" :precision="0" controlsPosition="right"
                                                    v-model="formData.lr_systemconfig_login_f_TokenTimeout"
                                                    :placeholder="$t('请输入')" />
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item :label="$t('密码错误验证')" prop="lr_systemconfig_login_f_IsPwdVerify">
                                            <el-col :span="9">
                                                <el-switch :activeValue="0" :inactiveValue="1"
                                                    v-model="formData.lr_systemconfig_login_f_IsPwdVerify" />
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item :label="$t('密码错误次数')" prop="lr_systemconfig_login_f_WrongPwdCount"
                                            v-if="formData.lr_systemconfig_login_f_IsPwdVerify == 0">
                                            <el-col :span="9">
                                                <el-input-number :min="3" controlsPosition="right"
                                                    v-model="formData.lr_systemconfig_login_f_WrongPwdCount"
                                                    :placeholder="$t('请输入')" />
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item :label="$t('')" prop="lr_systemconfig_login_f_PwdType"
                                            v-if="formData.lr_systemconfig_login_f_IsPwdVerify == 0">
                                            <el-col :span="9">
                                                <l-radio :options="lr_systemconfig_login_f_PwdTypeOptions"
                                                    v-model="formData.lr_systemconfig_login_f_PwdType" />
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item :label="$t('限制登录时间')" prop="lr_systemconfig_login_f_IsLoginTime">
                                            <el-col :span="9">
                                                <el-switch :activeValue="0" :inactiveValue="1"
                                                    v-model="formData.lr_systemconfig_login_f_IsLoginTime" />
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item :label="$t('登录时间')" prop="lr_systemconfig_login_f_LoginTime"
                                            v-if="formData.lr_systemconfig_login_f_IsLoginTime == 0">
                                            <el-col :span="9">
                                                <div>
                                                    <draggable :list="LoginTimeStrOptions"
                                                        ghost-class="set-item-ghost" handle=".drag-item">
                                                        <div 
                                                            v-for="(item, index) in LoginTimeStrOptions" 
                                                            class="set-item"
                                                            :key="index"
                                                            style="padding: 4px;"
                                                            >
                                                            <i class="drag-item el-icon-rank"></i>
                                                            <l-date 
                                                                format="yyyy-MM-dd HH:mm:ss" 
                                                                dateType="datetime" 
                                                                :clearable="true" 
                                                                v-model="item.startTime" 
                                                                :placeholder="$t('请选择')" 
                                                                style="width:42%;margin-right:2%;"
                                                                >
                                                            </l-date>
                                                            <l-date 
                                                                format="yyyy-MM-dd HH:mm:ss" 
                                                                dateType="datetime" 
                                                                :clearable="true" 
                                                                v-model="item.endTime" 
                                                                :placeholder="$t('请选择')" 
                                                                style="width:42%;"
                                                                @input="input_endTime(item)"
                                                                >
                                                            </l-date>
                                                            <el-button @click="handleRemoveDatas(index)" circle plain
                                                                type="danger" size="mini" icon="el-icon-minus"
                                                                class="delete-item" style="padding: 4px;"></el-button>
                                                        </div>
                                                    </draggable>
                                                    <div style="padding-left:22px;">
                                                        <el-button size="mini" type="text"
                                                            icon="el-icon-circle-plus-outline" @click="handleAddDatas">{{
                                                                $t('添加可登录时间区间') }}</el-button>
                                                    </div>
                                                </div>
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item :label="$t('限定IP')" prop="lr_systemconfig_login_f_IsIpAuth">
                                            <el-col :span="9">
                                                <el-switch :activeValue="0" :inactiveValue="1"
                                                    v-model="formData.lr_systemconfig_login_f_IsIpAuth" />
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item :label="$t('限定类型')" prop="lr_systemconfig_login_f_IpAuthType"
                                            v-if="formData.lr_systemconfig_login_f_IsIpAuth == 0">
                                            <el-col :span="9">
                                                <el-radio-group v-model="formData.lr_systemconfig_login_f_IpAuthType"
                                                    size="mini">
                                                    <el-radio :label="1" border>{{ $t('黑名单') }}</el-radio>
                                                    <el-radio :label="0" border>{{ $t('白名单') }}</el-radio>
                                                </el-radio-group>
                                            </el-col>
                                        </el-form-item>
                                        <el-form-item :label="$t('限定IP')" prop="lr_systemconfig_login_f_IpAuth"
                                            v-if="formData.lr_systemconfig_login_f_IsIpAuth == 0">
                                            <el-col :span="9">
                                                <el-input type="textarea" :rows="6"
                                                    v-model="formData.lr_systemconfig_login_f_IpAuth"
                                                    :placeholder="$t('多个IP设置，请用英文符号隔开，例如:192.168.0.1,192.168.0.2')" />
                                            </el-col>
                                        </el-form-item>
                                    </div>
                                </el-row>
                            </el-tab-pane>

                        </el-tabs>
                    </div>
                </el-form>
            </div>
        </l-panel>



        <template #bottom>
            <l-panel style="padding-top:0;">
                <div class="leftbtns">
                    <el-button @click="handleRefresh" size="mini">{{ $t('刷新') }}</el-button>
                    <el-button @click="handleSave" size="mini" type="primary">{{ $t('保存策略')
                    }}</el-button>
                </div>
            </l-panel>
        </template>

    </l-layout>
</template>
<script>
const api = window.$api.systemconfig.configLogin

export default {
    props: {
        isReadOnly: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            moduleCode: 'systemconfig_ConfigLogin',
            activeName: 'tab0',
            formData: {
                lr_systemconfig_login_f_Id:"",//唯一标识(GUID)
                lr_systemconfig_login_f_LoginType: "1", // 登录方式
                lr_systemconfig_login_f_TokenTimeout: "12", // 登录时长(小时)
                lr_systemconfig_login_f_IsPwdVerify: 1, // 密码错误验证
                lr_systemconfig_login_f_WrongPwdCount: "3", // 密码错误次数
                lr_systemconfig_login_f_PwdType: 1, // 
                lr_systemconfig_login_f_IsLoginTime: 1, // 限制登录时间
                lr_systemconfig_login_f_LoginTime: "", // 登录时间
                lr_systemconfig_login_f_IsIpAuth: 1, // 限定IP
                lr_systemconfig_login_f_IpAuthType: 1, // 限定类型
                lr_systemconfig_login_f_IpAuth: "", // 限定IP

            },
            rules: {
                lr_systemconfig_login_f_LoginType: [
                    { required: true, message: this.$t('请选择登录方式') },
                ],
                lr_systemconfig_login_f_TokenTimeout: [
                    { required: true, message: this.$t('请输入登录时长(小时)') },
                ],
                lr_systemconfig_login_f_WrongPwdCount: [
                    { required: true, message: this.$t('请输入密码错误次数') },
                ],
                lr_systemconfig_login_f_PwdType: [
                    { required: true, message: this.$t('请选择') },
                ],


            },

            loading:false,
            loadingtext:"加载中....",
            LoginTimeStrOptions: [],


        };
    },
    computed: {
        lr_systemconfig_login_f_LoginTypeOptions() {
            return [{ "value": 1, "label": this.$t("单一登录") }, { "value": 2, "label": this.$t("同时登录") }]
        },
        lr_systemconfig_login_f_PwdTypeOptions() {
            return [{ "value": 1, "label": this.$t("账号锁定") }, { "value": 2, "label": this.$t("延时登录") }]
        },

    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.loadFormData()
        },
        // 校验表单
        async validateForm() {
            if (!await this.$formValidateWraper(this.$refs.form)) {
                return false
            }
            return true
        },
        // 设置表单数据
        setForm(data) {
            this.LoginTimeStrOptions=JSON.parse(data.f_LoginTime)
            this.$setFormData(this.formData, data, 'lr_systemconfig_login')
        },
        // 获取表单数据
        getForm() {
            return this.$getFormData(this.formData,'lr_systemconfig_login')

        },

        async loadFormData() {
            this.loading=true;
            this.loadingtext="加载数据中...";
            const data = await this.$awaitWraper(api.getconfiglogin())
            if (data) {
                this.setForm(data)
                this.loading=false;
                return true
            }
            else {
                this.loading=false;
                return false
            }
        },

        async saveForm() {
            const postData = this.getForm()
            if(this.LoginTimeStrOptions){
                postData.f_LoginTime=JSON.stringify(this.LoginTimeStrOptions)
            }
            if (this.formData.lr_systemconfig_login_f_Id) {// 编辑
                return await this.$awaitWraper(api.update(this.formData.lr_systemconfig_login_f_Id, postData))
            }
            else {// 新增
                return await this.$awaitWraper(api.add(postData))
            }
        },

        handleRefresh() {
            this.loadFormData();
        },
        handleAddDatas() {
            const start = new Date();
            this.LoginTimeStrOptions.push({ startTime: start, endTime: "" });
        },
        input_endTime(item) {
            if(this.lr_dateFormat(item.startTime)>this.lr_dateFormat(item.endTime)){
                this.$message({
                    type: 'warning',
                    message: `${this.$t('开始时间需要小于结束时间！')}`
                })     
                return item.endTime=""
            }
        },
        handleRemoveDatas(index){
            let defaultList = this.LoginTimeStrOptions;
            let dindex = defaultList.indexOf(this.LoginTimeStrOptions[index].value);
            if( dindex != -1){
                defaultList.splice(dindex,1)
                this.LoginTimeStrOptions =String(defaultList);
            }
            this.LoginTimeStrOptions.splice(index,1);
        },
        async handleSave(){
            this.loading=true;
            this.loadingtext=this.$t("保存数据中...");
            if (await this.validateForm()) {
                const res = await this.saveForm()
                if (res) {
                    this.$message({
                        type: 'success',
                        message: this.$t("配置成功！")
                    })
                    this.loadFormData()
                }
            }
            this.loading=true;
        }
    }
}
</script>

<style lang="scss">
.leftbtns {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    padding-left: 8px;
    display: flex;
    align-items: center;
}
</style>